<template>
  <drag-modal
    title="查看"
    :width="1366"
    :visible="visible"
    :dialogStyle="{ top: '8px'}"
    :destroyOnClose="true"
    :maskClosable="false"
    @cancel="cancel"
  >
    <a-spin :spinning="loading">
      <a-tabs type="card" :activeKey="this.activeKey" @change="(key) => { this.activeKey = key }">
        <a-tab-pane :key="0">
          <span slot="tab">
            终端信息
          </span>
          <a-card style="margin-top: 12px;">
            <terminal-info
              ref="terminalInfo"
              v-if="activeKey == 0"
              :recordId="recordId"
            />
          </a-card>
        </a-tab-pane>
        <a-tab-pane :key="1">
          <span slot="tab">
            指令参数
          </span>
          <a-card style="margin-top: 12px;">
            <terminal-command-setting
              ref="terminalCommandSetting"
              v-if="activeKey == 1"
              :recordId="recordId"
            />
          </a-card>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
    <template slot="footer">
      <a-button @click="cancel">关闭</a-button>
    </template>
  </drag-modal>
</template>

<script>
import {terminalService} from '@/services'
import TerminalInfo from './detail/terminal-info'
import TerminalCommandSetting from './detail/terminal-command-setting'

export default {
  name: 'QueryModal',
  components:{
    TerminalInfo,
    TerminalCommandSetting
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      loading: false,
      organizationTreeData: [],
      activeKey: 0,
      recordId: undefined,
      form: {
        organizationId: undefined
      }
    }
  },
  methods: {
    cancel() {
      this.$emit('cancel')
    },
    setId(val) {
      this.recordId = val
    }
  }
}
</script>